<template>

  <el-container style="margin: 0;background: #EBEEF5;">

    <el-header style="background-color:#00050a">
      <el-row style="background-color:#00050a;height: 60px">

        <el-col :span="4">
          <i class="el-icon-coordinate" style="float: right;"><strong style="margin-right: 10px;margin-top: 10px;font-size: 25px;text-align: center;color: #fff" >GameStore</strong></i>
        </el-col>
        <el-col :span="8">
          <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                   background-color="#00050a"
                   text-color="#fff"
                   active-text-color="#ffd04b">
            <el-menu-item index="1" ><a >主页</a></el-menu-item>
            <el-menu-item index="5" >全部游戏</el-menu-item>
          </el-menu>
        </el-col>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6" :offset="6">
          <div class="header-avatar" style="text-align: right;margin-top: 20px"  >
            <!--              <el-avatar class="el-avatar"  size="medium" :src="userInfo.avatar"></el-avatar>-->
            <el-dropdown>
          <span class="el-dropdown-link" >
            <i class="el-icon-s-custom" style="color: #EBEEF5"></i>{{this.username}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
              <el-dropdown-menu slot="dropdown">
                <router-link to="/cart" style="text-decoration-line: none;color: #8f8f8f"><el-dropdown-item @click.native="">
                  购物车
                </el-dropdown-item></router-link>
                <router-link to="/myOrder" style="text-decoration-line: none;color: #8f8f8f"><el-dropdown-item @click.native="">
                  我的订单
                </el-dropdown-item></router-link>
                <router-link to="/owns" style="text-decoration-line: none;color: #8f8f8f"><el-dropdown-item @click.native="">
                  我的游戏
                </el-dropdown-item></router-link>
                <el-dropdown-item @click.native="modify">
                  修改个人信息
                </el-dropdown-item>
                <el-dropdown-item @click.native="logout">
                  退出
                </el-dropdown-item>


              </el-dropdown-menu>
              <!--            <router-link to="/login" style="margin-left: 8px; color: white">-->
              <!--              退出管理系统-->
              <!--            </router-link>-->
            </el-dropdown>
          </div>
        </el-col>
      </el-row>

      <!--      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" >-->
      <!--        <div style="text-align: center"><strong style="font-size: 20px;text-align: center" >GameStore</strong></div>-->
      <!--        <el-menu-item index="1" ><a >主页</a></el-menu-item>-->
      <!--        <el-menu-item index="5" >全部游戏</el-menu-item>-->
      <!--        <el-menu-item index="3" >登录</el-menu-item>-->
      <!--        <el-menu-item index="4" >注册</el-menu-item>-->
      <!--      </el-menu>-->

    </el-header>



  <!--编辑对话框-->
  <el-dialog
      title="修改个人信息"
      :visible.sync="dialogVisible1"
      width="600px"
      :before-close="handleClose1">

    <el-form :model="editForm1" :rules="editFormRules1" ref="editForm1" label-width="100px" class="demo-editForm">

      <el-form-item label="用户名" prop="username" label-width="100px">
        <el-input v-model="editForm1.username" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="邮箱" prop="email" label-width="100px">
        <el-input v-model="editForm1.email" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item  label="新密码" prop="newpas" label-width="100px" placeholder="请输入新密码，如果无需修改请忽略">
        <el-input placeholder="请输入新密码，如果无需修改请忽略" v-model="editForm1.newpas" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item  label="确认密码" prop="confirm" label-width="100px" placeholder="请确认密码，如果无需修改请忽略">
        <el-input placeholder="请输入新密码，如果无需修改请忽略" v-model="editForm1.confirm" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm1('editForm1')" style="margin: auto">确认修改</el-button>
        <el-button @click="handleClose1">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
    <el-main >

      <router-view></router-view>
    </el-main>
    <el-footer height="60px" style="text-align: center;background-color:#00050a;height:40px;width: 100%;bottom: 0;">
      <a href="/home1" style="color: #FFFFFF;margin-top: 5px;height:60px;  text-decoration-line: none">@GameStore<br></a>
    </el-footer>
  </el-container>
</template>

<script>
export default {
  name:"Index1",
  data() {
    return {
      editForm1:{
        userId:'',
        username:'',
        email:'',
        password:'',
        newpas:'',
        confirm:''
      },
      editFormRules1: {
        username: [
          {required: true, message: '用户名不能为空', trigger: 'blur'}
        ],
        email: [
          {required: true, message: '邮箱不能为空', trigger: 'blur'},
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        newpas: [
          { min: 6, message: '密码不能少于6位', trigger: 'blur' }
        ],
      },
      dialogVisible1:false,
username:sessionStorage.getItem('username'),
userId:+sessionStorage.getItem('userId'),
      activeIndex: '/device_new/',

    currentDate: new Date()
    };
  },
created(){
    if(sessionStorage.getItem('userId') === '-1' || sessionStorage.getItem('userId') === null || sessionStorage.getItem('role') === '1'){
      this.$router.push("/login")
      this.$message({
        showClose: true,
        message: '没有权限',
        type: 'error',
      });
    }
},
  mounted() {
    this.activeIndex = this.$route.path
  },
  methods: {
    handleClose1() {
     this.dialogVisible1=false;
    },
    modify(){
      this.$axios.get('/user/'+this.userId).then(res => {
        if(res.data.status === 200){
          this.editForm1.userId=res.data.userId;
          this.editForm1.username=res.data.username;
          this.editForm1.password=res.data.password;
          this.editForm1.email=res.data.email;
          this.editForm1.newpas='';
          this.editForm1.confirm='';
        }
      })
      this.dialogVisible1=true;
    },
    logout(){
      this.$axios.get("/logout").then(res => {
        if(res.data.status === 200){
          this.$message({
            showClose: true,
            message: '退出成功',
            type: 'success',
          });
          sessionStorage.setItem("userId",'-1');
          sessionStorage.setItem("token", '-1')
          this.$router.push("/login")
        }
      })
    },
    search(){
      this.$router.push('/allGames1');
    },
    submitForm1(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if(this.editForm1.newpas !== null ||this.editForm1.confirm !== null){
            if(this.editForm1.newpas !== this.editForm1.confirm){
              this.$message({
                showClose: true,
                message: '两次密码不一致',
                type: 'error',
              });
              return false;
            }else{
              this.editForm1.password=this.$md5(this.editForm1.newpas);
            }
          }
          this.dialogVisible1 = false;
          this.$axios.post('/user/modify' , this.editForm1)
              .then(res => {
                if(res.data.status === 200) {
                  this.$message({
                    showClose: true,
                    message: '修改成功',
                    type: 'success',
                  });
                  sessionStorage.setItem("username",this.editForm1.username)
                  this.dialogVisible1 = false
                }
              })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    handleSelect(key, keyPath) {
      console.log(key);
      if(key == '1'){
        this.$router.push({path: '/home1'});
      }
      if(key == '3'){
        this.$router.push({path: '/login'});
      }
      if(key == '4'){
        this.$router.push({path: '/register'});
      }
      if(key == '5'){
        this.$router.push({path: '/allGames1'});
      }


    },

  }
};
</script>

<style>

.el-icon-coordinate{
  font-size:49px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

</style>